<template>
  <div class="app-bg auto">
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">户号</label>
        <input class="col-xs-8" v-model="model.f_userinfo_id" placeholder="请输入用户编号">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">姓名</label>
        <input class="col-xs-8" v-model="model.f_user_name" placeholder="请输入用户姓名">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">电话</label>
        <input class="col-xs-8" v-model="model.f_user_phone" placeholder="请输入用户电话">
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">开始时间</label>
        <datepicker
          :value.sync="model.f_start_date"
          :disabled-days-of-week="[]"
          :format="'yyyy-MM-dd'"
          :show-rest-button="reset"
          v-model="model.f_start_date"
          condition="f_checkdate >= '{}'">
        </datepicker>
      </div>
      <div class="row app-input">
        <label class="col-xs-4 control-label text-left">结束时间</label>
        <datepicker
          :value.sync="model.f_end_date"
          :disabled-days-of-week="[]"
          :format="'yyyy-MM-dd'"
          :show-rest-button="reset"
          v-model="model.f_end_date"
          condition="f_checkdate >= '{}'">
        </datepicker>
      </div>
      <div class="row app-btn" style="margin-bottom: -5px;">
        <button class="btn btn-primary col-xs-6" @click="search()"><span class="glyphicon glyphicon-zoom-in" style="margin-right: 20px;"></span>查询</button>
      </div>
    <div v-for='row in user' class="app-list">
      <div class="row" style="color: #00B9F1;">
        <span class="col-xs-2">户号：</span><span class="col-xs-4">{{row.f_userinfo_id}}</span>
        <span class="col-xs-2">姓名：</span><span class="col-xs-4">{{row.f_user_name}}</span>
      </div>
      <div class="row">
        <span class="col-xs-3">上期指数：</span><span class="col-xs-3">{{row.f_last_tablebase}}</span>
        <span class="col-xs-3">本期指数：</span><span class="col-xs-3">{{row.f_tablebase}}</span>
      </div>
      <div class="row">
        <span class="col-xs-3">用气量：</span><span class="col-xs-3">{{row.f_oughtamount}}</span>
        <span class="col-xs-3">电话：</span><span class="col-xs-3">{{row.f_user_phone}}</span>
      </div>
      <div class="row">
        <span class="col-xs-3">抄表时间：</span><span class="col-xs-9">{{row.f_hand_date}}</span>
      </div>
      <div class="row">
        <span class="col-xs-3">地址：</span><span class="col-xs-9">{{row.f_address}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as Util from '../Util'
import appData from '../../../src/components/appData'
import config from '../../../src/components/config'
import Vue from 'vue'
import co from 'co'
let handplansearch = function * (self) {
  let condition = `1=1 and f_meter_state = '已抄表' and  h.f_inputtor = '${appData.loginUser.logininfo[0].f_bieming}'`
  // let condition = `1=1 and  h.f_inputtor = '${appData.loginUser.logininfo[0].f_bieming}'`
  for (var key in self.model) {
    console.log(key);
    if (self.model[key] !== '' ) {
      if (key === 'f_start_date' || key === 'f_end_date' || key === 'f_user_name'  ) {
        if (key === 'f_start_date') {
            condition  += ` and h.f_input_date >= '${self.model['f_start_date']} 00:00:00' `
        } else if (key === 'f_end_date') {
          condition  += ` and h.f_input_date <= '${self.model['f_end_date']} 23:59:59'`
        }else if(key === 'f_user_name'){
          condition  = condition + ` and h.${key} like '%${self.model[key]}%'`
        }

      } else {
          condition  = condition + ` and s.${key} = '${self.model[key]}'`
      }
      console.log(condition);
    }

  }
  // config.resultUrl +
  yield self.$resetpost(config.resultUrl + 'rs/sql/handplansearch', {data: {condition:condition}},
   {resolveMsg: null, rejectMsg: null})
  .then ((res)=> {
    self.user = res.data
    if(res.data.length === 0){
      self.$showMessage('没有此用户，请查看你输入的查询信息')
    }
  })
  .catch ((res)=> {
    self.$showMessage('获取用户数据失败，请查看你输入的查询信息')
  })
}
export default {
  props: ['userinfo'],
  title:'缴费历史查询',
  data () {
    return {
      model: {
        f_userinfo_id: '',
        f_user_name: '',
        f_user_phone:'',
        f_start_date: Util.toStartDateString(),
        f_end_date: Util.toStandardDateString(),
      },
      user: []
    }
  },
  methods: {
    search () {
      if (this.model.f_user_name !=='' || this.model.f_userinfo_id !== '' || this.model.f_user_phone !=='') {
        let gen = handplansearch(this)
        return co(gen)
      } else {
        this.$showMessage('请输入任意查询条件，确保信息准确性')
      }

    }
  }
}
</script>
